<script setup lang="ts">
import { ref } from 'vue';

import {
  EyeOutlined,
  FireOutlined,
  SafetyCertificateOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue';

const stats = ref({
  totalWorship: 156,
  totalSBT: 89,
  onlineUsers: 3,
  totalVisits: 2340,
});

const topWorshippers = ref([
  {
    name: '朱瞻基',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuZhanji',
    count: 24,
    sbtCount: 12,
  },
  {
    name: '朱高炽',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuGaochi',
    count: 18,
    sbtCount: 9,
  },
  {
    name: '朱棣',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuDi',
    count: 15,
    sbtCount: 8,
  },
]);
</script>

<template>
  <a-card title="📊 祠堂数据统计" size="small">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-statistic title="总祭祀次数" :value="stats.totalWorship" suffix="次">
          <template #prefix>
            <FireOutlined style="color: #ff4d4f" />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="生成SBT" :value="stats.totalSBT" suffix="个">
          <template #prefix>
            <SafetyCertificateOutlined style="color: #faad14" />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="在线用户" :value="stats.onlineUsers" suffix="人">
          <template #prefix>
            <TeamOutlined style="color: #52c41a" />
          </template>
        </a-statistic>
      </a-col>
      <a-col :span="6">
        <a-statistic title="总访问量" :value="stats.totalVisits" suffix="次">
          <template #prefix>
            <EyeOutlined style="color: #1890ff" />
          </template>
        </a-statistic>
      </a-col>
    </a-row>

    <a-divider />

    <h4>🏆 祭祀排行榜</h4>
    <a-list :data-source="topWorshippers" size="small">
      <template #renderItem="{ item, index }">
        <a-list-item>
          <a-list-item-meta>
            <template #avatar>
              <a-badge
                :count="index + 1"
                :number-style="{
                  backgroundColor:
                    index === 0
                      ? '#faad14'
                      : index === 1
                        ? '#c0c0c0'
                        : '#cd7f32',
                }"
              >
                <a-avatar :src="item.avatar" />
              </a-badge>
            </template>
            <template #title>{{ item.name }}</template>
            <template #description>
              祭祀{{ item.count }}次 · 获得{{ item.sbtCount }}个SBT
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>
